<template>
  <view class="app-container">
    <view class="course-teacher-title">{{ teacherObj.name }}-律动艺术钢琴专业课程</view>
    <view class="course-list-title">课程列表:</view>
    <!--  课程列表  -->
    <block v-if="courseList.length>0">
      <view class="course-item hor-layout" v-for="(item,index) in courseList" :key="index" @click="toVideoPage(item)">
        <view class="course-img ver-layout-center" :style="{backgroundImage:`url(${ic_select_course_one})`}">
          <view class="title single-line">{{ item.cate_title }}</view>
          <view class="desc single-line">{{ item.cate_description }}
          </view>
        </view>
        <view class="course-info ver-layout">
          <view class="course-title">{{ item.title }}</view>
          <view class="course-content">{{ item.major }}</view>
        </view>
        <view class="play-btn">立即播放</view>
      </view>
    </block>
    <view v-else class="list-no-data">暂无数据</view>
    <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
  </view>
</template>

<script>
import {recordVideo} from "@/router.js"
import {RecordCourseApi} from "@/api/teacherManage.js"

let ic_select_course_one = require("@/static/home/ic_select_course_one.png")
let engine = new RecordCourseApi()

export default {
  name: "recordCourse",
  data() {
    return {
      ic_select_course_one,
      teacherObj: {},
      courseList: [],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad(options) {
    this.teacherObj = options
    this.refreshData()
  },
  onReachBottom(e) {
    this.loadMore()
  },
  methods: {
    toVideoPage(video) {
      this.$u.route({url: recordVideo, params: video})
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.courseList = []
      this.getRecordCourseList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getGoodsList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.courseList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    getRecordCourseList() {
      let teacher_id = this.teacherObj.id
      let page = this.loadingObj.current
      engine.getRecordCourseList({page, teacher_id}).then(res => {
        this.courseList = this.courseList.concat(res.data)
        this.loadFinish(res.total)
      })
    }
  }
}
</script>

<style scoped>
.course-teacher-title {
  margin-top: 6px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333333;
}

.course-list-title {
  margin-top: 18px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #42B4AB;
}

.course-item {
  position: relative;
  padding: 20px 0px;
  border-bottom: 1px solid #E5E5E5;
}

.course-img {
  width: 110px;
  height: 63px;
  margin-right: 12px;
  border-radius: 10px;
  background-size: 100% 100%;
  /*background-image: linear-gradient(left top, #7E41FF, #9F51FF);*/
  /* 文本样式 */
  color: white;
  padding: 10px;
}

.course-img > .title {
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
}

.course-img > .desc {
  margin-top: 3px;
  width: 100%;
  text-align: center;
  font-size: 10px
}

.course-info {
  flex: 1;
}

.course-title {
  font-size: 15px;
  line-height: 15px;
  font-weight: bold;
  font-family: Source Han Sans CN;
  color: #333333;
}

.course-content {
  margin-top: 10px;
  font-size: 10px;
  line-height: 10px;
  font-family: Source Han Sans CN;
  color: #FF1D1D;
}

.play-btn {
  position: absolute;
  right: 0px;
  bottom: 20px;
  padding: 0px 9px;
  height: 24px;
  border: 1px solid #42B4AB;
  border-radius: 12px;
  /*文本样式*/
  line-height: 24px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #42B4AB;
}
</style>
